﻿/**
 * Created by wzj on 2017/3/20.
 */
Date.prototype.format = function (fmt) { 
    var o = {
        "M+": this.getMonth() + 1, //月份 
        "d+": this.getDate(), //日 
        "h+": this.getHours(), //小时 
        "m+": this.getMinutes(), //分 
        "s+": this.getSeconds(), //秒 
        "q+": Math.floor((this.getMonth() + 3) / 3), //季度 
        "S": this.getMilliseconds() //毫秒 
    };
    if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
    for (var k in o)
    if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
    return fmt;
}
//
class RTable extends React.Component {

	constructor(props) {
		super(props);
		//初始数据
		this.products = [];
		this.state = {
			datas:[],
			totalSize: 0,
			sizePerPage: 10,
			page: 1,
			searchData:{
				custAcctId:$("#custAcctId").val(),
				"_csrf":$("input[name=_csrf]").val(),
				begin:"",  //开始时间
				end:""  //结束时间
			}
		}


		//数据行选中配置
		this.selectRowProp  = {
			mode: 'radio',
			onSelect: this.onRowSelect,
			onSelectAll: this.onSelectAll
		}

		this.ajaxRequestData = this.ajaxRequestData.bind(this);
		this.handlePageChange = this.handlePageChange.bind(this);
		this.handleSizePerPageChange = this.handleSizePerPageChange.bind(this);

	}
	/*******************************************************************/
	//DOM加载完成
	componentDidMount(){
		//请求第1页数据，且每页显示5条
		this.ajaxRequestData();
	}
	/*******************************************************************/

	ajaxRequestData(searchData = this.state.searchData, page = this.state.page, sizePerPage = this.state.sizePerPage) {
		//过滤查找条件
		this.setState({
			searchData:searchData
		});
		$.ajax({
			url:"fundChgListData",
			type:'POST',
			data:{
				custAcctId:searchData.custAcctId,
				begin:searchData.begin,  //开始时间
				end:searchData.end,  //结束时间
				"_csrf":$("input[name=_csrf]").val(),
				page:page-1,
				sizePerPage:sizePerPage
			},
			success:function(str,msg,response){
				if(response.statusText=="success"){
					var result = JSON.parse(response.responseText);
					this.setState({
						datas: result.content,
						totalSize: result.totalElements,
						page:result.number+1,
						sizePerPage:result.size
					});

				}
			}.bind(this),
			error:function(str,msg,response){
			}.bind(this)
		});

	}
	/*******************************************************************/

	//分页数量选项事件
	handleSizePerPageChange(sizePerPage){
		this.ajaxRequestData(this.state.searchData, 1, sizePerPage);
	}

	//分页事件
	handlePageChange(page, sizePerPage){
		this.ajaxRequestData(this.state.searchData,page,sizePerPage);
	}

	/*******************************************************************/
	//选中行
	onRowSelect = (row, isSelected) =>{
		var rowArr = [];
		if(isSelected) {
			rowArr.push(row.id);
		}
	}
	onSelectAll = (isSelected, currentDisplayAndSelectedData) =>{

	}

	/*******************************************************************/
	//外部模态窗体表单保存
	externalModalOnSave	= (object) =>{
		alert("添加"+object)
		
		
	}
	//自定义添加按钮点击事件
	handleInsertButtonClick = (onClick) => {
		//console.log(onClick,this);
		showExternalModalForm();
		//onClick(); //弹出自带模态窗体
	}
	//自定义添加按钮
	createCustomInsertButton =(onClick) =>{
		return (
			<button className="btn btn-primary" onClick={ () => this.handleInsertButtonClick(onClick) }>+添加</button>
			//<button className="btn btn-primary" onClick={ openModal }>+添加</button>
		);
	}

	//自定义删除按钮点击事件
	handleDeleteButtonClick = (onClick) => {
		alert("删除id:"+this.state.selectRows)
	}
	//自定义删除按钮
	createCustomDeleteButton = (onClick) => {
		return (
			<button className="btn btn-danger" onClick={ e => this.handleDeleteButtonClick(onClick) }>-删除</button>
			//<button className="btn btn-danger" onClick={ onBtnClick }>-删除</button>
		);
	}
	/*******************************************************************/
	//过滤按钮事件
	handleBtnClick = (evt) =>{
		var value = evt.target.innerHTML;
	//	this.refs.filterName.applyFilter(value);
		alert("过滤Name:"+value)
	}

	//过滤下拉框事件
	handleSelectChange = (evt) =>{
		var value = evt.target.options[evt.target.options.selectedIndex].value;
		//this.refs.filterName.applyFilter(value);

		alert("过滤Name:"+value)
	}

	/*******************************************************************/
	render() {

	//配置
	const tableOptions = {
		noDataText: '暂无可用数据',

		page: this.state.page,		//当前第几页
		sizePerPage: this.state.sizePerPage,	//每页显示几条
		onPageChange: this.handlePageChange,  //分页事件
		onSizePerPageList: this.handleSizePerPageChange, //分页下拉事件

		sizePerPageList: [
			{text: '5', value: 5},
			{text: '10', value: 10 },
			{text:'所有', value:this.products.length}
		],				//分页数量选项
		sizePerPage: this.state.sizePerPage,	//每页显示条数
		pageStartIndex: this.state.currentPage, //	分页开始索引
		paginationSize: 3,	//分页数字按钮个数
		prePage: '上一页',
		nextPage: '下一页',
		firstPage: '首页',
		lastPage: '尾页'
		//,insertBtn: this.createCustomInsertButton		//自定义添加按钮
		//,deleteBtn: this.createCustomDeleteButton		//自定义删除按钮
		//,insertModalBody: this.createCustomModalBody	//自定义模态窗窗体
		//,insertModalHeader: this.createCustomModalHeader	//自定义模态窗标题
		//,onAddRow: this.onAddNewRow	//远程添加新数据
		//,onDeleteRow: this.onDeleteRow	//远程删除数据
	}

		return (
				<BootstrapTable data={ this.state.datas }
								remote={true}
								striped hover

								fetchInfo={ { dataTotalSize: this.state.totalSize } }

								options={ tableOptions }
								pagination={ true }

								>
				<TableHeaderColumn dataField='linkType'  width="120" dataFormat={function(cell,row){return $("#linkType").data(cell.toString())}}>操作类型 </TableHeaderColumn>
				<TableHeaderColumn dataField='chgTotalBalance' dataFormat={function(cell,row){return Number(cell).toFixed(2)} }>可用资金变化</TableHeaderColumn>
				<TableHeaderColumn dataField='chgTotalFreezeAmount' dataFormat={function(cell,row){return Number(cell).toFixed(2)} }>冻结资金变化</TableHeaderColumn>
				<TableHeaderColumn dataField='totalAmount' dataFormat={function(cell,row){return Number(cell).toFixed(2)} }>账户余额 </TableHeaderColumn>
				<TableHeaderColumn dataField='totalBalance' dataFormat={function(cell,row){return Number(cell).toFixed(2)} }>可用余额 </TableHeaderColumn>
				<TableHeaderColumn dataField='totalFreezeAmount' dataFormat={function(cell,row){return Number(cell).toFixed(2)} }>冻结金额 </TableHeaderColumn>
				<TableHeaderColumn dataField='transDate'  dataFormat={formatDate}>日期 </TableHeaderColumn>
				<TableHeaderColumn dataField='chgId'  isKey={ true } dataFormat={customFormatterOperation}>操作 </TableHeaderColumn>
				</BootstrapTable>
		);
	}
}
//var myRTable = ReactDOM.render(<RTable url="" />,document.getElementById("component-table"));


//
function customFormatter2(cell,row){
	return cell.custAcctId;
}
function customFormatter3(cell,row){
	return cell.thirdCustId;
}
function customFormatterOperation(chgId,row){
	//return  "<a href='javascript:chgDataDetail(\""+chgId+"\")'>查看详情</a>";
}



//自定义格式化表格内容
function customFormatterPrice(cell,row){
	return "$ "+cell;
}
//保存表单数据
function save_newItem(){
	//调用组件内保存方法并发送ajax请求
	myRTable.externalModalOnSave($("#item-form").serialize());
}

function showExternalModalForm(){
	
}

$().ready(function(){
	//订单状态 数据字典
	$("body").append("<div id=\"linkType\">");

	
	$("#linkType").data("1","申请支付");
	$("#linkType").data("2","冻结");
	$("#linkType").data("3","解冻");
	$("#linkType").data("4","收费");
	$("#linkType").data("5","退费");
	$("#linkType").data("6","会员支付到市场");
	$("#linkType").data("7","市场支付到会员");
	$("#linkType").data("8","确认支付");
	$("#linkType").data("10","取消交易");
	$("#linkType").data("11","代理复核支付");
	$("#linkType").data("12","强制支付");
	$("#linkType").data("14","冻结收费");
	$("#linkType").data("15","会员冻结支付到市场");

	
	$("#linkType").data("100","入金");
	$("#linkType").data("101","出金");

	//window.setInterval("myRTable.ajaxRequestData()",1000);

});


function formatDate(cell,row){
	if (cell){
		return new Date(cell).format("yyyy-MM-dd hh:mm:ss");
	}else{
		return "";
	}
}